<script setup>
import ModalBox from '@/components/ModalBox/ModalBox.vue'
import UploadFile from "@/components/UploadFile/UploadFile.vue"
import {userImport} from '@/apis/organizationsManaging/unitManaging'
import { reactive, ref, toRaw,inject } from 'vue';
import { message } from 'ant-design-vue';
import { Form } from 'ant-design-vue';
const useForm = Form.useForm;
const open = ref(false);
const formRef = ref();
const formState = reactive({
    file:"",
    cid:"",
});
const value = ref([]);
const { resetFields, validate, validateInfos } = useForm(
    formState,
    reactive({
        cid: [{ required: true, message: '请选择公司编号', trigger: 'change', }],
        file: [{ required: true, message: '请上传模板', trigger: 'change', }],
    }),
);
const onSubmit = () => {
    formRef.value
        .validate()
        .then(() => {
            craeteEdit()
        })
        .catch(error => {
            console.log('error', error);
        });
};
const options = inject('companyTreeData')
const handleOk = (options) => {
    console.log(options);
    validate()
        .then(res => {
            handleimport()
        })
        .catch(err => {
            console.log('error', err);
        });
    // open.value = false
}
const handleimport=()=>{
    
    userImport(formState).then(res=>{
        console.log(res);
    })
}
const handleCancel = () => {
    open.value = false
}
const upload=(file)=>{
    console.log(file);
    formState.file=file
}
defineExpose({ open,formState })

</script>
<template>
    <modal-box title="批量导入员工" :isOpen="open" @ok="handleOk" @cancel="handleCancel" width="500px">
        <template #content>
            <div>
                <a-form ref="formRef" :model="formState" @finish="handleOk">
                    <a-form-item  label="公司编号" v-bind="validateInfos.cid">
                        <a-select v-model:value="formState.cid" :allowClear="true">
                            <a-select-option v-for="item in options" :value="item.id">{{ item.title }}</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item ref="file" label="导入模板" class="description" v-bind="validateInfos.file">
                        <UploadFile @upload="upload"/>
                    </a-form-item>
                </a-form>
            </div>
        </template>
    </modal-box>
</template>
<style lang='scss' scoped>
.description {
    width: 100% !important;
    margin-right: 0px !important;
}

:deep(.ant-form) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

:deep(.ant-form-item) {
    width: 100%;
    margin-right: 10px;

    &:nth-child(2n) {
        margin-right: 0;
    }
}

:deep(.ant-form-item-label) {
    width: 80px;
}
</style>